﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>物理视图绑定逻辑应用</title>
	<link rel="stylesheet" href="./css/css.css">
	<link rel="stylesheet" href="./css/leftBar.css">
	<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="./css/sitemap.css" />
	<link type="text/css" rel="Stylesheet" href="./css/acstyle.css" />
	<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="./js/messagecenter.js"></script>
	<script type="text/javascript" src="./js/common.js"></script>
	<script type="text/javascript" src="./js/canvas7.js"></script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 20px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}
		.cell{
			background-color:#FFFFFF !important;
		}
	</style>
	<script>
        function lineEvent1(){}
        function lineEvent2(){}
        function lineEvent3(){}
        function  iconEvent4(obj){
        }
        function searchLogicTopology(){
            var search_like = $("#logicTopologyQuery").val();
            var url = "[[@{/logic_topology/query}]]";
            $.ajax({
                url:url,
                data:{
                    "params.name_like":search_like
                },
                type:"POST"
            }).done(function(result){
                $("#contentTableTbody").html('');
                addDataPop(result.data);
            })
		}
        function exportMyCanvas(){
        	$("#myCanvas").css({"height":"auto","bottom":"0px"});
        }
        /*右键 */
        $(document).bind('contextmenu',function(){
            return false;
        });
        $("body").click("mousedown",function(e){
            $(".rightKey").hide();
		});
       
</script>
</head>
<body>
<div class="rightKey shadow">
	<div class="rk1">删除</div>
</div>
<div class="left_content">
	<div class="left_block1">
		<div class="left_logo"></div>
		<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
		<div class="left_icons">
			<div class="left_icon1"></div>
			<div class="left_icon2"></div>
			<div class="left_icon3"></div>
		</div>
	</div>
	<div class="left_block2">
		<div class="left_menu" onclick="window.location.href='physical_topology_library';">拓扑文件库</div>
		<div class="left_menu" onclick="window.location.href='logical_application_library';">逻辑预案库</div>
		<div class="left_menu" onclick="window.location.href='deploy_topology_library';" style="background-color:#04A0E9;color:#FFFFFF;">部署库</div>
		<div class="left_menu monitor">监控</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='physical_monitors';">
				物理监控
			</div>
		</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='logical_monitors';">
				逻辑监控
			</div>
		</div>
		<div class="left_menu other">其他</div>
		<div class="left_menu  level22" >
			<div class="level22Border" onclick="window.location.href='commonCMD';">
				我的常用命令
			</div>
		</div>
		<div class="left_menu level22" >
			<div class="level22Border" onclick="window.location.href='generalCMD';">
				命令模板
			</div>
		</div>
	</div>
	<form th:action="@{/logout}" method="post" >
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="bigmoniter" type="button" onclick="showBig();" style="cursor:pointer;">大屏监控</button>
			<button class="login"  type="submit">注销</button>
		</div>
	</form>
</div>
<div class="right_content" >
	<form id="form1">
		<input type="hidden" id="curId" name="curId">
		<!-- 头部 -->
		<div class="top-bar">
			<div style="float:left;">物理视图绑定逻辑应用<br>
				<span  class="text_color"  style="font-size: 13px;">Physical&nbsp;view&nbsp;binding&nbsp;logic&nbsp;application</span></div>
		</div>
		<!-- 右侧 -->
		<div class="right">
			<div class="r0 app_text">APP</div>
		</div>
		<!-- 左上 -->
		<div class="table-box" >

		</div>
		<!-- 底部 -->
		<div class="bottom" style="display: none !important;">
			<div class="bottom-bar">
				<div class="b1">预案库</div>
				<div class="b2">Choose&nbsp;to&nbsp;library</div>
				<div class="top_input b3">
					<button class="search" type="button" onclick="searchLogicTopology()">搜索</button>
					<input class="s_input" type="text" name="" id="logicTopologyQuery" placeholder="输入关键字搜索"/>
				</div>
			</div>
			<div class="headerTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
					<colgroup>
						<col width="25%">
						<col width="25%">
						<col width="25%">
						<col width="25%">
					</colgroup>
					<tr>
						<td><div>编号</div></td>
						<td><div>预案库名称</div></td>
						<td><div>备注</div></td>
						<td><div>操作</div></td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;">
					<colgroup>
						<col width="25%">
						<col width="25%">
						<col width="25%">
						<col width="25%">
					</colgroup>
					<tbody id="popTbody">
					</tbody>
				</table>
			</div>
		</div>
	</form>
</div>

</body>
<script type="text/javascript">
var canvasData = {x:0 , y:0, width:Math.ceil(window.innerWidth-325), height:Math.ceil(window.innerHeight-152)-140};
init_canvas(canvasData ,3,lineEvent1 , lineEvent2 ,lineEvent3,null,deleteApp,objEvent6);//初始化
drawCircles();


$("body").click("mousedown",function(e){
    $(".rightKey").hide();
});
//加载预案库
function getList(){
	 var search_like = $("#logicTopologyQuery").val();
     var url = "[[@{/logic_topology/query}]]";
     $("#contentTableTbody").html('');
     $.ajax({
         url:url,
         data:{
             "params.name_like":search_like
         },
         type:"POST",
         dataType:"JSON",
         async:false
     }).done(function(result){
         addDataPop(result.data);
     });
}

var pageApps = [];//此变量用于存app,选择用
function addDataPop(data){
    $("#popTbody").empty();
    var html = '';
    $.each(data,function(k,v){
        html += '<tr>';
        html += '<td><div>'+v.no+'</div></td>';
        html += '<td><div class="app_text">'+v.name+'</div></td>';
        html += '<td><div>'+v.remark+'</div></td>';
        html += '<td><div class="app_text" style="cursor:pointer;" onclick="selectLibrary('+v.id+');">选择</div></td>';
        html += '</tr>';
        var apps = {};
        if(v.apps&&v.apps.length>0){
        	var apps = {id:v.id,apps:v.apps};
        	pageApps.push(apps);
        }
    });
    $("#popTbody").append(html);
    tableSum();
}





var deployData;
var oldApps=[];
var links=[];
var logicalApps=[];
var appsLibraryId;
var id = '[[${id}]]';
var phyTopologyId;
$.ajax({
	url:'[[@{/deploy_topology/get_by_id}]]',
	data:{id:id},
	dataType:"JSON",
	type:"POST"
	}).done(function(data){
		deployData = data.data;
		
		var acBindor = data.data.acBindors;
		
		if(data.data.preinstalledLogicTopology!=null){
			if(data.data.preinstalledLogicTopology.apps.length>0){
				appsLibraryId=data.data.preinstalledLogicTopology.id;
				logicalApps=data.data.preinstalledLogicTopology.apps;
			}
			exportMyCanvas();
	        $(".table-box").css({"bottom":"0px"});
	        $("#myCanvas").attr("height",window.innerHeight-60);
		}else{
			getList();
			$(".bottom").show();
	        $(".table-box").css({"bottom":"230px"});

		}
		if(data.data.physicalTopology){
			phyTopologyId = data.data.physicalTopology.id;
			$.post('[[@{/physical_topology/get_by_id}]]',{id:phyTopologyId},"JSON").done(function(res){
		        if(res){
		            var data = res.data;
		            var machineBoxes = data.machineBoxes;
		            if(machineBoxes&&machineBoxes.length>0){
		                $.each(machineBoxes,function(k,v){
		                    addCanvasLevel1(k,v);
		                    var boards = v.boards;
		                    if(boards&&boards.length>0){
		                        $.each(boards,function(k1,v1){
		                        	v1.machineBoxId=v.id;
		                            addCanvasLevel2(k ,k1,v1);
		                            var cpus = v1.cpus;
		                            if(cpus&&cpus.length>0){
		                                $.each(cpus,function(k2,v2){
		                                	v2.boardId=v1.id;
		                                	v2.machineBoxId=v.id;
		                                    var obj3 = addCanvasLevel3(k,k1,k2,null,v2);
		                             		for(var g = 0;g<acBindor.length;g++){
		                             			if(acBindor[g].cpu.id==v2.id){
		                             				var app = acBindor[g].app;
		                             				var newObj = {acBindors:acBindor[g],tId:app.id,x:obj3.x , y:obj3.y , width:obj3.width , height:obj3.height , id:g , img:app.icon,app:app};
		                             				canvasAllLevel4.push(newObj);
		                    	        			drawCircles();
			                             			break;
		                             			}
		                             		}
		                                });
		                            }
		                        });
		                    }
		                });
		            }
		               	//重新加载右侧app 
		                if(logicalApps.length>0){
		         	    	var ids4 = [];
		         	    	var rightApps=[];
		         	    	for(var rt=0;rt<canvasAllLevel4.length;rt++){
		         	    		ids4.push(canvasAllLevel4[rt].app.id);
		         	    	}
		         	    	for(var i=0;i<logicalApps.length;i++){
		         	    		var curIndex=$.inArray(logicalApps[i].id,ids4);
		         	    		if(curIndex==-1){
		         	    			rightApps.push(logicalApps[i]);
		         	    		}
	         	        	}
		         	    	for(var g=0;g<rightApps.length;g++){
		         	    		var rapp = {tId:rightApps[g].id,x:Math.ceil(window.innerWidth-420) , y:((g+1)*80-70) , width:50 , height:50 , id:(g+1) , img:rightApps[g].icon,app:rightApps[g]};
		         	    		circles.push(rapp);
		         	    	}
    	        			drawCircles();
		        		}
		               	//app连线
		               	if(canvasAllLevel4&&canvasAllLevel4.length>0){
		               		$.ajax({
		            			url:'[[@{logic_link/find_by_logic_topology_id}]]',
		            			data:{id:appsLibraryId},
		            			dataType:"JSON",
		            			type:"POST"
		            		}).done(function(linkData){
		            			links=linkData.data;
		                		
		            			for(var i=0;i<links.length;i++){
		            				var leftAppId=links[i].leftApp.id;
		            				var rightAppId=links[i].rightApp.id;
		            				for(var j=0;j<canvasAllLevel4.length;j++){
		            					var leftApp=null;
		            	            	var rightApp=null;
		            					var linkData=null;
		            					if(leftAppId==canvasAllLevel4[j].app.id){
		            						leftApp=canvasAllLevel4[j];
		            						for(var j2=0;j2<canvasAllLevel4.length;j2++){
		            							if(rightAppId==canvasAllLevel4[j2].app.id){
		            								rightApp=canvasAllLevel4[j2];
		            								linkDatas={linkData:links[i],leftAppId:leftApp.id,righAppId:rightApp.id};
		            								doLine(leftApp , rightApp ,0,linkDatas);
		            								//连线统计 
		            								for(var m=0;m<lineObjs.length;m++){
		            									var obj1 = lineObjs[m].obj1;
		            									var obj2 = lineObjs[m].obj2;
		            									if(obj1.id==leftApp.id&&obj2.id==rightApp.id){
		            										lineObjs[m].count = lineObjs[m].count + 1;
		            										break;
		            									}
		            									if(obj1.id==rightApp.id&&obj2.id==leftApp.id){
		            										lineObjs[m].count = lineObjs[m].count + 1;
		            										break
		            									}
		            								}
		            							}
		            						}
		            					}
		            				}	
		            			}
					   	        drawCircles();
		            		});
	               		}
		        }
		    });
		}
	});
	function addAppLine(){
		
}
//选择预案库 
var curSelectLoId;
function selectLibrary(id){
	curSelectLoId = id;
	$(".bottom").hide();
    $(".table-box").css({"bottom":"0px"});
	exportMyCanvas();
    for(var i=0;i<pageApps.length;i++){
    	if(pageApps[i].id==id){
    		var apps = pageApps[i].apps;
    		addOne(apps);
    	}
    }
    //保存基础 绑定信息 
	deployData.acBindors=[];
	deployData.id='[[${id}]]';
	deployData.physicalTopology={id:phyTopologyId};
	deployData.preinstalledLogicTopology = {id:curSelectLoId};
	$.ajax({
		url:'[[@{/deploy_topology/save}]]',
		data:JSON.stringify(deployData),
		dataType:"JSON",
		type:"POST",
		contentType:"application/json"
	});
}
	
    $(function(){
        $(".search").on("click",function(){
        	getList();
        });
    });
	function objEvent6(previousSelectedCircle,chooseObj){
	    var preAcbindors=[];
		for(var ac=0;ac<canvasAllLevel4.length;ac++){
			var appId = canvasAllLevel4[ac].app.id;
			var cpuId = canvasAllLevel4[ac].acBindors.cpu.id;
			var acObj = {app:{id:appId},cpu:{id:cpuId},id:canvasAllLevel4[ac].acBindors.id};
			preAcbindors.push(acObj);
		}
		var appId = previousSelectedCircle.tId;
		var cpuId = chooseObj.id;
		var acObj = {app:{id:appId},cpu:{id:cpuId}};
		preAcbindors.push(acObj);
		deployData.acBindors=preAcbindors;
		deployData.id=id;
		deployData.physicalTopology={id:phyTopologyId};
		deployData.preinstalledLogicTopology = {id:appsLibraryId};
		$.ajax({
			url:'[[@{/deploy_topology/save}]]',
			data:JSON.stringify(deployData),
			dataType:"JSON",
			type:"POST",
			contentType:"application/json"
		}).done(function(res){
			if(res&&res.success){
				preAcbindors=res.data.acBindors;
				var curAC=null;
				for(var cu=0;cu<preAcbindors.length;cu++){
					if(preAcbindors[ac].app.id==appId&&preAcbindors[ac].cpu.id==cpuId){
						curAC=preAcbindors[ac]
					}
				}
				previousSelectedCircle.acBindors=curAC;
				addCanvasLevel4(previousSelectedCircle , chooseObj);
				chooseObj.params.title="";
				var preDragId=previousSelectedCircle.id;
				for(var i=0;i<circles.length;i++){
					if(circles[i].id>preDragId){
						circles[i].y-=80;
					}
				}

				//app连线 
					lineObjs=[];
					$.ajax({
						url:'[[@{logic_link/find_by_logic_topology_id}]]',
						data:{id:appsLibraryId},
						dataType:"JSON",
						type:"POST"
					}).done(function(linkData){
						links=linkData.data;
			    		
						for(var i=0;i<links.length;i++){
							var leftAppId=links[i].leftApp.id;
							var rightAppId=links[i].rightApp.id;
							for(var j=0;j<canvasAllLevel4.length;j++){
								var leftApp=null;
				            	var rightApp=null;
								var linkData=null;
								if(leftAppId==canvasAllLevel4[j].app.id){
									leftApp=canvasAllLevel4[j];
									for(var j2=0;j2<canvasAllLevel4.length;j2++){
										if(rightAppId==canvasAllLevel4[j2].app.id){
											rightApp=canvasAllLevel4[j2];
											linkDatas={linkData:links[i],leftAppId:leftApp.id,righAppId:rightApp.id};
											doLine(leftApp , rightApp ,0,linkDatas);
											//连线统计 
											for(var m=0;m<lineObjs.length;m++){
												var obj1 = lineObjs[m].obj1;
												var obj2 = lineObjs[m].obj2;
												if(obj1.id==leftApp.id&&obj2.id==rightApp.id){
													lineObjs[m].count = lineObjs[m].count + 1;
													break;
												}
												if(obj1.id==rightApp.id&&obj2.id==leftApp.id){
													lineObjs[m].count = lineObjs[m].count + 1;
													break
												}
											}
										}
									}
								}
							}	
						}
			           drawCircles();
				});
					
			}
			
		}).fail(function(faildata){
			var failApps=circles;
			circles=[];
			for(var f=0;f<failApps.length;f++){
				failApps[f].y=(f+1)*80-70;
				failApps[f].id=f+1;
				circles.push(failApps[f]);
			}
			var fapp = {tId:previousSelectedCircle.id,x:Math.ceil(window.innerWidth-420) , y:(failApps.length*80-70) , width:50 , height:50 , id:(failApps.length+1) , img:previousSelectedCircle.icon,app:previousSelectedCircle};
	    		circles.push(fapp);
		});
	};
	//删除 
	 function deleteApp(obj){
     	var delApp=[];
     		delApp=obj;
   		$(".rk1").unbind('click');
     	$(".rk1").on("click",function(){
       		$(".rightKey").hide();
       		//return false;
			var delAcbindors=[];
       		for(var dc=0;dc<canvasAllLevel4.length;dc++){
			 if(delApp.app.id!=canvasAllLevel4[dc].app.id){
     			var delac={app:{id:canvasAllLevel4[dc].app.id},cpu:{id:canvasAllLevel4[dc].acBindors.cpu.id},id:canvasAllLevel4[dc].acBindors.id};
     			delAcbindors.push(delac);
			 }
     		}
       		deployData.acBindors=delAcbindors;
    		deployData.id=id;
    		deployData.physicalTopology={id:phyTopologyId};
    		deployData.preinstalledLogicTopology = {id:appsLibraryId};		
    		$.ajax({
    			url:'[[@{/deploy_topology/save}]]',
    			data:JSON.stringify(deployData),
    			dataType:"JSON",
    			type:"POST",
    			contentType:"application/json"
    		}).done(function(res){
    			if(res&&res.success){
	        		//删除app后重画四级 
	        		var newcanvasAllLevel4 = canvasAllLevel4;
     				canvasAllLevel4 = [];
     				for(var i=0;i<newcanvasAllLevel4.length;i++){
     					var obj4 = newcanvasAllLevel4[i];
         				if(obj4.app.id!=delApp.app.id){
         					canvasAllLevel4.push(newcanvasAllLevel4[i]);
         				}
     				}
	        		//drawCircles();
     				//删除app同时删除与之相连的线 
     				var newLineObjs=[];
     				newLineObjs=lineObjs;
     				lineObjs=[];
     				for(var k=0;k<newLineObjs.length;k++){
							var obj1 = newLineObjs[k].obj1;
							var obj2 = newLineObjs[k].obj2;
							if(obj1.param.app.id!=delApp.app.id&&obj2.param.app.id!=delApp.app.id){
								lineObjs.push(newLineObjs[k]);
							}
						}
	        			//删除成功将原来的app放回
	        			var delCircles=circles;
	        			circles=[];
	        			for(var l=0;l<delCircles.length;l++){
	        				delCircles[l].y=l*80;
	        				circles.push(delCircles[l]);
	        			}
	                 	var newApp = delApp.app;
	                 	var backapp = {tId:newApp.id,x:Math.ceil(window.innerWidth-420) , y:(circles.length*80) , width:50 , height:50 , id:circles.length , img:newApp.icon,app:newApp};
         	    		circles.push(backapp);
		        		drawCircles();
		        	}
		        }).fail(function(res){
		        	alert("删除失败 ");
		        });
    	});
    }
    /*添加APP*/
   function addOne(data){
        for(var i=0;i<data.length;i++){
        	var appData=data[i];
            var newObj = {tId:appData.id,x:Math.ceil(window.innerWidth-420) , y:(i+1)*80 , width:50 , height:50 , id:(i+1) , img:appData.icon,app:appData};
            circles.push(newObj);
        }
       	drawCircles();
    }
   
	
   
    function tableSum() {
        $(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
        if ($(".contentTableDiv2").scrollTop() > 0) {
            var scrollWidth = getScrollbarWidth();
            $(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
        } else {
            $(".contentTableDiv2 table").css("width", "100%");
        }
        $(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
    }
 

    function getScrollbarWidth() {
        var odiv = document.createElement('div'),//创建一个div
            styles = {
                width: '100px',
                height: '100px',
                overflowY: 'scroll'//让他有滚动条
            }, i, scrollbarWidth;
        for (i in styles) odiv.style[i] = styles[i];
        document.body.appendChild(odiv);//把div添加到body中
        scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
        odiv.remove();//移除创建的div
        return scrollbarWidth;//返回滚动条宽度
    }
    function showBig(){
		window.location.href="physical_monitors2"
	}
</script>
</html>
